<template>
  <div class="extens">
    <!-- 首图 -->
    <banner :bdata="bannerData">
      <button class="banner_warp_item_bot">免费试用</button>
    </banner>

    <!-- 引流业务介绍 -->
    <doyou :dyData="dyList"></doyou>

    <!-- 引流推广流程 -->
    <div class="extens_warp">
      <h2>引流推广流程</h2>
      <div class="extens_warp_item">
        <div class="extens_warp_item_warp">
          <div class="extens_warp_item_c">
            <b>准备目标生数据</b>
            <p>客户提供目标号码致据,或通过51出海号码生成器生成</p>
          </div>
          <div class="extens_warp_item_c"></div>
        </div>

        <div class="extens_warp_item_warp">
          <div class="extens_warp_item_c"></div>
          <div class="extens_warp_item_c">
            <b>目标数据筛选</b>
            <p>
              通过51出海提供的号码筛选服务，筛选出开通的、活跃的WhatsApp号码
            </p>
          </div>
        </div>

        <div class="extens_warp_item_warp">
          <div class="extens_warp_item_c">
            <b>群发消息</b>
            <p>
              指定性别、年龄区段目标发送话术消息,消息格式可是文字、图片、链接、音视频、名片等
            </p>
          </div>
          <div class="extens_warp_item_c"></div>
        </div>

        <div class="extens_warp_item_warp">
          <div class="extens_warp_item_c"></div>
          <div class="extens_warp_item_c">
            <b>促进转化</b>
            <p>
              发送话术广告可以获得基砒转化,对于客户质量要求高的情况可通过聚合客服系统进行进一步聊天转化
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们做海外引流推广的优势 -->
    <advantage :advantage="tageList"></advantage>

    <!-- 适用范围 -->
    <div class="extens_apply">
      <h2>{{ applyfw.title }}</h2>

      <div class="extens_apply_warp" v-for="(item, i) in applyfw.list" :key="i">
        <h2>{{ item.warpName }}</h2>
        <div class="extens_apply_warp_item">
          <div
            class="extens_apply_warp_item_c"
            v-for="(item, i) in item.listData"
            :key="i"
          >
            <img :src="item.imgUrl" alt="" />
            <p>{{ item.con }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户案例 + 轮播 -->
    <khcase :lbata="lblist"></khcase>

    <!-- 51出海 -->
    <gotosea :sealist="seaData"></gotosea>

    <!-- 出海资讯 -->
    <outsea :lbata="seaHandel"></outsea>
  </div>
</template>

<script>
import banner from "@/components/banner"; //首图
import doyou from "@/components/doyou"; //引流业务介绍
import advantage from "@/components/advantage"; //我们做海外引流推广的优势
import khcase from "@/components/khcase"; //客户案例
import gotosea from "@/components/gotosea"; //51出海
import outsea from "@/components/outsea"; //出海资讯+轮播

export default {
  name: "extens",
  components: {
    banner,
    doyou,
    advantage,
    khcase,
    gotosea,
    outsea,
  },
  data() {
    return {
      bannerData: {
        bkImage: {
          backgroundSize: "100% auto",
          backgroundRepeat: "no-repeat",
          backgroundImage:
            "url(" +
            require("@/assets/product_page_title/top_page_oversea_promo_bg@.png") +
            ")",
        },
        list: {
          title: "海外引流推广",
          content:
            "提供海外引流推广代理服务，含wWhatsApp群发代发、whatsApp涨粉、Facebook用户数据采集Facebook涨粉成品号、电报机器人等",
        },
      },
      dyList: {
        title: "引流业务介绍",
        list: [
          {
            tiname: "WhatsApp引流",
            imgUrl: require("@/assets/oversea_promo/whatsapp_system_import_img.png"),
            warp: [
              {
                url: require("@/assets/oversea_promo/icon_phone_number_data_generate.png"),
                name: "号码数据生产",
                duan: "全球任意地区号码生成",
              },
              {
                url: require("@/assets/oversea_promo/icon_data_lot_filter.png"),
                name: "数据批量筛选",
                duan: "筛选号码数据，提取出开通并活跃的WhatsApp号码",
              },
              {
                url: require("@/assets/oversea_promo/icon_whatsapp_fans_grow_green_whatsapp.png"),
                name: "WhatsApp涨粉",
                duan: "通过多账号群发话术与名片，引导目标通过名片加到营销主号",
              },
              {
                url: require("@/assets/oversea_promo/icon_whatsapp_group_sent_promo.png"),
                name: "WhatsApp群发推广",
                duan: "通过向目标群发推广话术，引导目标下单或跳转指定站点",
              },
            ],
          },
          {
            tiname: "Facebook引流",
            imgUrl: require("@/assets/oversea_promo/facebook_trafficdata_import_img.png"),
            warp: [
              {
                url: require("@/assets/oversea_promo/icon_target_user_data_get_yellowmail.png"),
                name: "定向用户数据获取",
                duan: "指定群组、公共主页进行用户数据采集,获取用户如UID、邮箱、电话等信息",
              },
              {
                url: require("@/assets/oversea_promo/icon_limited_data_facebook_fans_grow.png"),
                name: "指定数据Facebook加粉",
                duan: "导入指定号码通讯录，快速添加Facebook账号好友，实现高精确目标人群营销",
              },
              {
                url: require("@/assets/oversea_promo/icon_facebook_timing_post_content_promo.png"),
                name: "Facebook定时发帖内容营销",
                duan: "通过推广内容营销,引导粉丝到站外如Shopify独立站、亚马逊、Shopee等其他电商平台实现销售转化",
              },
              {
                url: require("@/assets/oversea_promo/icon_fans_invite_social_media_platform.png"),
                name: "引粉到社交聊天平台",
                duan: "从Facebook上批量引粉添加到WhatsApp.LINE等社交聊天工具，随时触达高效发送推广信息",
              },
            ],
          },
          {
            tiname: "电报引流",
            imgUrl: require("@/assets/oversea_promo/telegram_traffic_import_img.png"),
            warp: [
              {
                url: require("@/assets/oversea_promo/icon_telegram_data_collec.png"),
                name: "电报群采集",
                duan: "提取群组活跃用户名单，可根据在线天数筛选活跃",
              },
              {
                url: require("@/assets/oversea_promo/icon_telegram_creat_group.png"),
                name: "电报拉群",
                duan: "批量拉粉丝进指定群，快速组成超级大群",
              },
              {
                url: require("@/assets/oversea_promo/icon_telegram_message_group_sent.png"),
                name: "电报消息群发",
                duan: "可发私信可发群组，大量推广信息自动发送",
              },
              {
                url: require("@/assets/oversea_promo/icon_telegram_group_auto_pre.png"),
                name: "电报自动热群",
                duan: "机器人小号按照预设话术自动聊天，营造群活跃氛围",
              },
              {
                url: require("@/assets/oversea_promo/icon_telegram_group_control_robot.png"),
                name: "电报群控机器人",
                duan: "多种群管理功能,集合禁言、踢人、删除信息、自动回复等功能",
              },
            ],
          },
        ],
      },
      tageList: {
        title: "我们做海外引流推广的优势",
        list: [
          {
            imgUrl: require("@/assets/oversea_promo/limited_range_precise_fans_grow_redchatbox_img.png"),
            name: "指定范围精准涨粉",
            content:
              "支持WhatsApp、Facebook受众国家区域、年龄范围与特定性别涨粉",
          },
          {
            imgUrl: require("@/assets/oversea_promo/multy_message_group_sent_support_img.png"),
            name: "多媒体信息群发支持",
            content:
              "可发送文字、图片、链接、音视频、账号名片等多种不同信息定向推送，支持多变量群发推广",
          },
          {
            imgUrl: require("@/assets/oversea_promo/pinky_piggy_img.png"),
            name: "无掺假不骗量",
            content: "支持CPA计价模式，没有掺假没有扣量",
          },
          {
            imgUrl: require("@/assets/oversea_promo/customer_chat_assistant_img.png"),
            name: "搭配客服聊天助手",
            content:
              "随时追踪群发效果与后续运营，支持多个坐席快捷回复，自动回复，自动翻译",
          },
        ],
      },
      applyfw: {
        title: "适用范围",
        list: [
          {
            warpName: "平台",
            listData: [
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_facebook_img.png"),
                con: "Facebook",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_shopify_img.png"),
                con: "Shopify",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_amazon_img.png"),
                con: "Amazon",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_shopee_img.png"),
                con: "Shopee",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_lazada_img.png"),
                con: "Lazada",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_platform_persona_img.png"),
                con: "个人业务",
              },
            ],
          },
          {
            warpName: "行业",
            listData: [
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_jewelry_img.png"),
                con: "珠宝服饰",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_oversea_fin_img.png"),
                con: "海外金融",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_skin_img.png"),
                con: "美妆护肤",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_medical_img.png"),
                con: "保健药品",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_game_img.png"),
                con: "游戏出海",
              },
              {
                imgUrl: require("@/assets/oversea_promo/scope_of_application_industray_toy_img.png"),
                con: "玩具摆件",
              },
            ],
          },
        ],
      },
      lblist: {
        theme: "客户案例",
        imgUrl: require("@/assets/Homepage_desktop/client_case_hand_shake_img.png"),
        list: [
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image1.png"),
            title: "虚拟产品卖家",
            param:
              "我们做虚拟产品的要做常规推广限制很多，51出海团队为我们提供了WhatsApp群发技术，让我们可以稳定地找到客户源。",
          },
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image2.png"),
            title: "独立站站长",
            param:
              "一直想找到个低成本又有效的推广方法。与51出海合作把WhatsAPP私域做起来后，我们做持续的复购，把成本摊得比纯投推广更低，效果显著。",
          },
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image3.png"),
            title: "亚马逊服装店长",
            param:
              "我们通过51出海的Facebook拓实做站外推广，逐渐积攒下了一大批FB和WS的私域粉丝。多亏了这个操作，我们抵抗住了封店潮的风险。",
          },
        ],
      },
      seaData: {
        title: "51出海",
        twotitle: "转为跨境流量服务",
        imgUrl: require("@/assets/Homepage_desktop/data_pie_img.png"),
        list: [
          {
            name: "触达国家",
            num: "200",
            geshu: "个",
            fuhao: "+",
          },
          {
            name: "触达用户",
            num: "20",
            geshu: "亿",
            fuhao: "+",
          },
          {
            name: "日均拓客",
            num: "10",
            geshu: "万",
            fuhao: "+",
          },
          {
            name: "服务客户",
            num: "50000",
            geshu: "个",
            fuhao: "+",
          },
        ],
      },
      seaHandel: {
        theme: "出海资讯",
        list: [
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.extens /deep/ .banner_warp_item_h2 {
  margin-top: 95px;
}
.extens /deep/ .banner_warp_item_p > p {
  font-size: 1.3em;
  width: 65%;
}

/* 适用范围 */
.extens_apply {
  background: #f8f8f8;
  padding: 30px 15px;
  color: #1d2845;
}
.extens_apply_warp > h2 {
  font-size: 1.5em;
  text-align: center;
  padding: 20px 0 15px 0;
}
.extens_apply_warp_item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}
.extens_apply_warp_item_c {
  width: 28%;
  margin: 12px 0;
}
.extens_apply_warp_item_c > img {
  width: 100%;
}
.extens_apply_warp_item_c > p {
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 10px;
}

/* 引流推广流程 */
.extens_warp {
  padding: 30px 15px 30px 15px;
  background: #f8f8f8;
}
.extens_warp > h2,
.extens_apply > h2 {
  text-align: center;
  font-size: 1.8em;
  color: #1d2845;
}
.extens_warp_item {
  background-image: url("../assets/oversea_promo/traffic_data_import_promo_flow_img_mobile.png");
  height: 625px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-top: 20px;
  padding-top: 15px;
}
.extens_warp_item_warp {
  display: flex;
  justify-content: space-between;
}
.extens_warp_item_c {
  text-align: center;
  width: 42%;
}
.extens_warp_item_c > b {
  display: inline-block;
  font-size: 1.2em;
  margin-bottom: 10px;
}
.extens_warp_item_c > p {
  color: #6f7b8e;
  font-size: 1em;
}
.extens_warp_item_warp:nth-child(2),
.extens_warp_item_warp:nth-child(3),
.extens_warp_item_warp:nth-child(4) {
  margin-top: 21%;
}
</style>